<template>
  <view class="template-mine tn-safe-area-inset-bottom">
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#f7a432">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-between">
        <view class="custom-nav__back">
          
        </view>
        <view class="custom-nav__more">
          <view @click="tn('/minePages/message')" class="tn-icon-notice" style="font-size: 32rpx;color: #262626;">
            <!-- <tn-badge 
            backgroundColor="#E72F8C" fontColor="#FFFFFF" 
            :absolute="true" :translateCenter="false">
              <text>12</text>
            </tn-badge> -->
          </view>
          <image  @click="tn('/minePages/set')"  class="more-icon-img" mode="aspectFill" src="https://fastcdn.hidino.com/dinner/more.png"></image>
        </view>
      </view>
    </tn-nav-bar>
    <view class="about__wrap" :style="{marginTop: (vuex_custom_bar_height) +'px'}">
      <view class="tn-flex about__context">
        <view class="mine-top-context">
          <view class="logo-pic" >
            <view class="logo-image">
              <view @click="previewImage(userInfo.avatar)" class="logo-avatar" 
                :style="`background-image:url('${userInfo.avatar || 'https://fastcdn.hidino.com/hiotk/user.png'}');`">
              </view>
              <image
                @click="tn('/minePages/edit')"
                mode="aspectFill"
                class="mine-focus-image" 
                src="https://fastcdn.hidino.com/dinner/focus.png"
              ></image>
            </view>
          </view>
          <view class="tn-padding-left" @click="tn('/minePages/edit')">
            <view class="">
              <text class="mine-user-name">{{userInfo.nickname}}</text>
            </view>
            <view class="tn-padding-top-xs mine-desc-wrap">
              <text class="mine-user-des tn-text-ellipsis">点击添加介绍，让大家认识你…</text>
              <text class="edit-icon xicon-edit"></text>
            </view>
          </view>
        </view>
        <view class="mine-bottom-context">
          <view class="mine-bottom-tabs">
            <view 
              @click="tn(`/minePages/friendsfans?tabindex=0&userid=${userInfo.id}`)" 
              class="mine-bottom-tab">
              <view class="mine-bottom-tab-num">
                {{userInfo.followsCount}}
              </view>
              <view class="mine-bottom-tab-text">
                关注
              </view>
            </view>
            <view 
              @click="tn(`/minePages/friendsfans?tabindex=1&userid=${userInfo.id}`)" 
              class="mine-bottom-tab">
              <view class="mine-bottom-tab-num">
                {{userInfo.fansCount}}
              </view>
              <view class="mine-bottom-tab-text">
                粉丝
              </view>
            </view>
          </view>
          <view class="mine-bottom-btns">
            <view class="mine-bottom-btn" @click="tn('/minePages/edit')">
              编辑资料
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mine-tabs-switch">
      <tn-sticky :offsetTop="0" 
      :customNavHeight="vuex_custom_bar_height">
        <tn-tabs 
        :list="fixedList" 
        :current="current" 
        :isScroll="false" 
        activeColor="#262626" 
        inactiveColor="#999"
        :bold="true" 
        :barStyle="{
          backgroundColor: '#EC5446'
        }"
        :fontSize="32" 
        :badgeOffset="[20, 50]" 
        @change="tabChange" 
        backgroundColor="#FFFFFF" 
        width="100%"
        :height="100"></tn-tabs>
      </tn-sticky>
    </view>
    <view class="" v-if="current != 2">
      <view class="" style="padding: 30rpx 20rpx;" >
        <tn-waterfall ref="waterfall" 
        v-model="list" 
        @finish="handleWaterFallFinish">
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" 
            :key="item.id" class="product__item" @click="tn(`/preferredPages/shop?id=${item.id}`)">
              <view class="item__image">
                <tn-lazy-load :threshold="-450" height="100%" 
                :image="item.image" :index="item.id" imgMode="widthFix"></tn-lazy-load>
              </view>
              <view class="item__data">
                <view class="item__title-container">
                  <!-- <view v-if="item.newProduct" class="item__store-type tn-bg-gray--light">标签</view>
                  <view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">SVIP</view> -->
                  <text class="item__title tn-color-cat">{{ item.name }}</text>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                 
                  <view class="justify-content-item">
                    <text class="tn-icon-fire tn-color-gray tn-padding-right-xs"></text>
                    <text class="tn-color-gray">{{ item.score }}</text>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view v-for="(item, index) in rightList" :key="item.id" 
            class="product__item" @click="tn(`/preferredPages/shop?id=${item.id}`)">
              <view class="item__image">
                <tn-lazy-load :threshold="-450" 
                height="100%" :image="item.image" :index="item.id" 
                imgMode="widthFix"></tn-lazy-load>
              </view>
              <view class="item__data">
                <view class="item__title-container">
                  <!-- <view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-5">VIP</view> -->
                  <text class="item__title tn-color-cat">{{ item.name }}</text>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                  <view class="justify-content-item">
                    <text class="tn-icon-fire tn-color-gray tn-padding-right-xs"></text>
                    <text class="tn-color-gray">{{ item.score }}</text>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </tn-waterfall>
      </view>
      <tn-load-more :status="loadStatus"></tn-load-more>
    </view>
    <view class="" v-else>
      <view class="" >
        <view class="tn-flex tn-flex-direction-column">
          <!-- 图文信息 -->
          <block v-for="(item,index) in list">
            <view class="blogger__item" :key="index">
              <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
                <view class="justify__author__info" @click="tn('/circlePages/blogger_other')">
                  <view class="tn-flex tn-flex-row-center">
                    <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                      <view class="">
                        <tn-avatar
                          class=""
                          shape="circle"
                          :src="item.avatar || 'https://fastcdn.hidino.com/hiotk/user.png'"
                          size="lg">
                        </tn-avatar>
                      </view>
                      <view class="tn-padding-right tn-text-ellipsis">
                        <view class="tn-padding-right 
                        blogger__nickname
                        tn-padding-left-sm tn-text-bold tn-text-lg">
                          {{ item.nickname ? item.nickname : '匿名' }}
                          
                        </view>
                        <view class="tn-padding-right blogger__time tn-padding-left-sm 
                        tn-padding-top-xs">
                          {{ parseDate(item.createDate) }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
                  <!-- 为什么不放关注按钮，因为快餐文化的世界，关注按钮放在外面没必要 -->
                  <text class="tn-icon-more-vertical blogger__more tn-text-bold tn-text-xxl"></text>
                </view>
              </view>
             
              <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left" @click="gotToDetails(item.id)">
                <view v-for="(label_item,label_index) in item.labels" 
                :key="label_index" class="blogger__desc__label
                 tn-float-left tn-margin-right 
                 tn-round tn-text-sm tn-text-bold">
                  <text class="blogger__desc__label--prefix">#</text> 
                  <text class="tn-text-df blogger__desc__label_text">{{ label_item }}</text>
                </view>
                <!-- 不用限制长度了，因为发布的时候限制长度了-->
                <text v-if="!item.labels || item.labels.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.record }}</text>  
              </view>
              
              <block v-if="item.albums">
                <view v-if="[1,2,4].indexOf(item.albums.length) != -1" class="tn-padding-top-xs" @click="gotToDetails(item.id)">
                  <image v-for="(image_item,image_index) in item.albums" :key="image_index" 
                    class="blogger__main-image"
                    :class="{
                      'blogger__main-image--1 tn-margin-bottom-sm': item.albums.length === 1,
                      'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.albums.length === 2 || item.albums.length === 4
                    }"
                    :src="image_item"
                    mode="aspectFill"
                  ></image>
                </view>
                <view v-else class="tn-padding-top-xs" @click="gotToDetails(item.id)">
                  <tn-grid  hoverClass="none" :col="3">
                    <block v-for="(image_item,image_index) in item.albums" :key="image_index">
                      <tn-grid-item style="width: 30%;margin: 10rpx;">
                        <image
                          class="blogger__main-image blogger__main-image--3"
                          :src="image_item"
                          mode="aspectFill"
                        ></image>
                      </tn-grid-item>
                    </block>
                  </tn-grid>
                </view>
              </block>
             
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
                <view class="justify-content-item blogger__count__area tn-text-center">
                  <view class="">
                    <text class="blogger__count-icon xicon-bearfoot"></text> 
                    <text class="tn-padding-right">{{ item.cmtNum }}</text>
                    <text class="blogger__count-icon tn-icon-comment"></text>
                    <text class="tn-padding-right">{{ item.cmtNum }}</text>
                    <text class="blogger__count-icon tn-icon-like"></text>
                    <text class="">{{ item.likeNum }}</text>
                  </view>
                </view>
                <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view style="margin-right: 10rpx;margin-left: 20rpx;">
                    <tn-avatar-group :lists="item.cmtAvatar || []" size="sm"></tn-avatar-group>
                  </view>
                  <text class="tn-color-gray">{{ item.cmtNum }}人</text>
                </view> -->
              </view>
            </view>
            
            <!-- 边距间隔 -->
            <view class="tn-strip-bottom" v-if="index != list.length - 1"></view>
          </block>
          
          <!-- 边距间隔 -->
          <view class="tn-strip-bottom"></view>
              
        </view>
      </view>
      <tn-load-more :status="loadStatus"></tn-load-more>
    </view>
  </view>
</template>

<script>
  import {
  	getMineLikes, getMineRecords
  } from '@/libs/js/home.js';
  import { date } from '@/libs/js/utils.js';
  import { mapState, mapGetters } from 'vuex';
  export default {
    name: 'Mine',
    data() {
      return {
        current: 0,
        listQuery: {
          limit: 20,
          page: 1,
          collect: 1
        },
        loadStatus: 'loadmore',
        fixedList: [
          {name: '收藏'},
          {name: '点赞'},
          {name: '打卡'}
        ],
        triggered: false,
        loading: false,
        loaded: false,
        list: [],
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        userId: 'userId'
      })
    },
    mounted() {
      this.listQuery.userId = this.userInfo.id || this.userId;
      this.getList();
    },
    methods: {
      previewImage(avatar){
        if(avatar){
          uni.previewImage({
            urls: [avatar],
            longPressActions: {
              itemList: ['发送给朋友', '保存图片', '收藏'],
              success: function(data) {
                console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
              },
              fail: function(err) {
                console.log(err.errMsg);
              }
            }
          })
        }
      },
      refreshList() {
        if (this.loading) return;
        this.loaded = false;
        console.log('refresh')
        this.listQuery.page = 1;
        this.getList();
      },
      getList(){
        if(this.loading || this.loaded){
          return;
        }
        this.loading = true;
        this.loadStatus = 'loading'
        setTimeout(() => {
          this.loading = false;
        }, 3000)
        if(this.current === 2){
          this.getRecords();
        }else{
          this.getCollects();
        }
      },
      parseDate(d) {
        return date('Y年m月d日H时i分s秒', d)
      },
      getCollects() {
        getMineLikes(this.listQuery).then(res => {
          console.log(res);
        	if (res.code === 0 && res.data.list && res.data.list.length) {
        		const t = res.data.list.map(r => {
        			return {
        				title: r.name,
        				address: r.addresses,
        				image: r.albums ? JSON.parse(r.albums)[0].url : '',
        				restaurantsLikeBo: r.restaurantsLikeBo,
        				...r
        			}
        		})
            if(this.listQuery.page == 1){
              this.list = t;
            }else{
              this.list = this.list.concat(t);
            }
            
            if(t.length < this.listQuery.limit){
              this.loaded = true;
              this.loadStatus = 'nomore'
            }
          
        	}else{
            this.loaded = true;
            this.loadStatus = 'nomore'
          }
          this.listQuery.page++;
          this.loading = false;
        })
      },
      getRecords() {
        getMineRecords(this.listQuery).then(res => {
          console.log(res);
        	if (res.code === 0 && res.data.list && res.data.list.length) {
        		const t = res.data.list.map(r => {
        			return {
        		    ...r,
        				title: r.record,
        				address: r.addresses,
        				albums: r.albums && r.albums.match(/http/gi) ? r.albums.split(',') : '',
        				labels: r.restaurantsLabels ? JSON.parse(r.restaurantsLabels) : [],
        			}
        		})
            if(this.listQuery.page == 1){
              this.list = t;
            }else{
              this.list = this.list.concat(t);
            }
            
            if(t.length < this.listQuery.limit){
              this.loaded = true;
              this.loadStatus = 'nomore'
            }
          
        	}else{
            this.loaded = true;
            this.loadStatus = 'nomore'
          }
          this.listQuery.page++;
          this.loading = false;
        })
      },
      // 瀑布流加载完毕事件
      handleWaterFallFinish() {
        if(this.loaded){
          this.loadStatus = 'nomore'
        }else{
          this.loadStatus = 'loadmore'
        }
      },
      // 获取价格整数和小数部分
      getPrice(price) {
        const priceStr = String(price)
        if (priceStr.indexOf('.') !== -1) {
          return priceStr.split('.')
        } else {
          return [priceStr, '00']
        }
      },
      tabChange(index) {
        console.log(index);
        this.list = [];
        if(this.current != 2) {
          this.$refs.waterfall.clear();
        }
        this.loaded = false;
        this.loading = false;
        this.current = index;
        this.loadStatus = 'loadmore'
        if(index === 0){
          this.listQuery.page = 1;
          this.listQuery.collect = 1;
          this.listQuery.like = undefined;
          this.listQuery.noLike = undefined;
        }else if(index === 1) {
          this.listQuery.page = 1;
          this.listQuery.collect = undefined;
          this.listQuery.like = 1;
        }else if(index === 2) {
          this.listQuery.page = 1;
        }
        this.getList();
      },
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      // 收货地址
      navAddress() {
        uni.chooseAddress({
        })
      },
      // 震动跳转
      navThanks(e) {
        wx.vibrateShort();
      },
      // 复制开源地址
      copySource() {
        uni.setClipboardData({
          data: "暂未上传插件市场",
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  .mine-tabs-switch{
    border-radius: 32rpx 32rpx 0px 0px;
    margin-top: -32rpx;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #E8E8E8;
    z-index: 2;
  }
  
  .template-mine {
    max-height: 100vh;
  }
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  }
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      padding-left: 24rpx;
      position: absolute;
      .tn-icon-notice{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 50rpx;
        height: 50rpx;
        background-color: rgba(255, 255,255, 0.5);
        border-radius: 100%;
      }
    }
    &__more{
      margin: auto 5rpx;
      flex-basis: 5%;
      width: 300rpx;
      position: absolute;
      right: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      padding-right: 24rpx;
      .tn-icon-notice{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 50rpx;
        margin-right: 10rpx;
        height: 50rpx;
        background-color: rgba(255, 255,255, 0.5);
        border-radius: 100%;
      }
      .more-icon-img{
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  /* 瀑布流*/
  .product__item {
    background-color: #FFFFFF;
    overflow: hidden;
    margin: 0 10rpx;
    margin-bottom: 40rpx;
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    
    .item {
      /* 图片 start */
      &__image {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        border: 1rpx solid #F8F7F8;
        border-radius: 10rpx;
        overflow: hidden;
      }
      /* 图片 end */
      
      /* 内容 start */
      &__data {
        padding: 14rpx 0rpx;
      }
      
      /* 标题 start */
      &__title-container {
        text-align: justify;
        line-height: 38rpx;
        vertical-align: middle;
      }
      &__store-type {
        height: 28rpx;
        font-size: 20rpx;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4rpx;
        border-radius: 6rpx;
        white-space: nowrap;
        text-align: center;
        top: -2rpx;
        margin-right: 6rpx;
      }
      &__title {
        font-size: 30rpx;
      }
      /* 标题 end */
      
      /* 标签 start */
      &__tags-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
      }
      &__tag {
        margin: 10rpx;
        color: #7C8191;
        background-color: #F3F2F7;
        padding: 4rpx 14rpx 6rpx;
        border-radius: 10rpx;
        font-size: 20rpx;
        
        &:first-child {
          margin-left: 0rpx !important;
        }
      }
      /* 标签 end */
      
      /* 价格 start */
      &__price-container {
        font-size: 24rpx;
        color: #E83A30;
        font-weight: bold;
      }
      &__price {
        &--unit {
          
        }
        &--integer {
          font-size: 38rpx;
        }
        &--decimal {
          
        }
      }
      /* 价格 end */
      /* 内容 end */
    }
  }
  
  /* 自定义导航栏内容 end */
  
  /* 顶部背景图 start */
  .top-backgroup {
    height: 600rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 600rpx;
      // z-index: -1;
    }
  }
  
  .logo-image {
    width: 160rpx;
    height: 160rpx;
    position: relative;
    .logo-avatar{
      width: 160rpx;
      height: 160rpx;
      background-size: cover;
      overflow: hidden;
      border-radius: 50%;
    }
    .mine-focus-image{
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 8rpx;
      bottom: 0;
    }
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  /* 页面 start*/
  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .about {
  
    &__wrap {
      background-image: url(https://fastcdn.hidino.com/dinner/mine-bg.png);
      background-size: cover;
      position: relative;
      z-index: 1;
      padding-bottom: 32rpx;
      margin: 0rpx;
      height: 440rpx;
      .about__context{
        width: 100%;
        height: 100%;
        padding: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        .mine-top-context{
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          .mine-user-name{
            font-size: 18px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }
          .mine-desc-wrap{
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          .mine-user-des{
            width: 168px;
            overflow: hidden;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .edit-icon{
            font-size: 18px;
            line-height: 12px;
            color: #fff;
            margin-left: 20rpx;
          }
        }
        .mine-bottom-context{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          margin-top: 32rpx;
          .mine-bottom-tabs{
            display: flex;
            flex-direction: row;
            align-items: center;
            .mine-bottom-tab{
              display: flex;
              width: 28px;
              flex-direction: column;
              align-items: center;
              .mine-bottom-tab-num{
                font-size: 16px;
                line-height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
              }
              .mine-bottom-tab-text{
                font-size: 14px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 300;
                color: #FFFFFF;
              }
            }
            .mine-bottom-tab + .mine-bottom-tab{
              margin-left: 48rpx;
            }
          }
          .mine-bottom-btns{
            .mine-bottom-btn{
              width: 84px;
              height: 26px;
              border-radius: 13px 13px 13px 13px;
              opacity: 1;
              border: 1px solid #FFFFFF;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>